<!-- <!DOCTYPE html> -->
<html>
    <head>
        <meta charset="utf-8" />
        <title>后台布局模板</title>
        <link rel="stylesheet" type="text/css" href="/vendor/layui-v2.3.0/css/layui.css">
        <link rel="stylesheet" type="text/css" href="/css/page-common.css">
        <style type="text/css">
            .flex-container {
                display: flex;
                flex-direction: row;
                width: 100%;
                height: 100%;
            }
            .side-bar {
                width: 150px;
                background-color: cornsilk;
            }
            .content {
                flex:1;
                background-color: greenyellow;
                display: flex;
                flex-direction: column;
            }
            .side-bar, .content {
                height: 100%;
            }
            .content-head {
                height: 50px;
                background-color: white;
            }
            .content-main {
                flex: 1;
                background-color: hotpink;
                overflow-y: scroll;
            }
        </style>
    </head>
    <body>
        <div class="flex-container">
            <div class="side-bar">侧边栏布局</div>
            <div class="content">
                <div class="content-head">上边布局</div>
                <div class="content-main">
                    <!-- 主内容布局 -->
                    <div style="height: 1000px;">主内容布局测试</div>
                </div>
            </div>
        </div>
    </body>
</html>